<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>替换字符串模版{}中的变量</title>
</head>
<body>
<script>
    const obj = {
        amount: '￥200',
        amount2: '￥300'
    }

    /**
     * @description 从一个字符串中匹配出模版{}中的字符
     * 例如字符串 “国家补贴，已经减去了{amount}，又减去了{amount2}，非常好！”，
     * 替换后得到 “<span>国家补贴，已经减去了</span><b>￥200</b><span>，又减去了</span><b>￥300</b><span>，非常好！</span>”
     * */
    function fn (str) {
        const REG = /\{([^}]+)\}/g
        const tpls = str.match(REG)
        const arr = []
        console.log(tpls) // ['{amount}', '{amount2}']

        const replaceTpl = (tpl) => {
            return tpl.replace(REG, function () {
                console.log(arguments) // ['{amount}', 'amount', 0, '{amount}', callee: ƒ, Symbol(Symbol.iterator): ƒ]
                const field = arguments[1]
                if (field) {
                    return obj[field]
                }
            })
        }

        // // 替换字符串中的模版为真实数据
        // // 方法一 循环
        // for (const tpl of tpls) {
        //     let i = -1
        //     while ((i = str.indexOf(tpl)) !== -1) {
        //         const len = tpl.length
        //         const subStr = str.substring(0, i)
        //         // 模版前边文本
        //         arr.push({
        //             tag: 'span',
        //             text: subStr
        //         })
        //         // 模版
        //         arr.push({
        //             tag: 'b',
        //             text: replaceTpl(tpl)
        //         })
        //         str = str.substring(i + len)
        //     }
        // }
        // // 剩余字符串
        // arr.push({
        //     tag: 'span',
        //     text: str
        // })
        //
        // // 可以使用 react-dom 或 vue 中的 createElement 方法生成 vnode
        // console.log(arr)

        // 方法二 replace
        str.replace(REG, (...args) => {
            const field = args[1]
            return field ? `<b style="color: #FF0F23;">${item[field] || ''}</b>` : ''
        })
    }

    fn('国家补贴，已经减去了{amount}，又减去了{amount2}，非常好！')

</script>
</body>
</html>